<template>
  <div v-loading="loading">
      <div class="suoyin">{{ suoyin }}</div>
      <div class="expand">
          <div class="list">
              <div>
                  <div v-for="(item,index) in gripbasicleft" :key="index">
                      {{ item }}
                  </div>
              </div>
              <div class="list-title">
                  <div v-for="(item,index) in gripbasicright" :key="index">
                      {{ item }}
                  </div>
              </div>
          </div>
          <div class="GrpChanges">
              <el-table
                  :data="state1.tableData"
                  style="width: 100%; margin-bottom: 2vh"
                  :header-cell-style="{
                      backgroundColor: 'var(--tableheaderback)',
                      color: 'var(--tableheadercolor)',
                      border: '2px solid var(--tableborder)',
                  }"
                  :cell-style="{ border: '2px solid var(--tableborder)' }"
                  stripe
                  border
                  v-loading="loading"
              >
                  <el-table-column
                      v-for="(item, index) in state1.oldList"
                      :key="`col_${index}`"
                      :prop="state1.columns[index].prop"
                      :label="item.label"
                      align="center"
                      min-width="120"
                  ></el-table-column>
              </el-table>
          </div>
          <div class="ratiotitle">
              <div class="content">{{ title }}</div>
          </div>
          <el-table
              :data="tableData1"
              :show-header="false"
              stripe
              style="margin-bottom: 2vh"
              :cell-style="{ border: '2px solid var(--tableborder)' }"
              border
          >
              <el-table-column>
                  <template v-slot="{ row }">
                   
                      <div v-html="makeBr(row.title1)">

                      </div>
                  </template>
              </el-table-column>
              <el-table-column>
                  <template v-slot="{ row }">
                      <div style="text-align: right;">{{ row.content1 }}</div>
                  </template>
              </el-table-column>
              <el-table-column>
                  <template v-slot="{ row }">
                      {{ row.title2 }}
                  </template>
              </el-table-column>
              <el-table-column>
                  <template v-slot="{ row }">
                      <div style="text-align: right;">{{ row.content2 }}</div>
                  </template>
              </el-table-column>
          </el-table>
          <div class="GrpYearEnd">
              <el-table
                  :data="state3.tableData"
                  style="width: 100%; margin-bottom: 2vh"
                  :header-cell-style="{
                      backgroundColor: 'var(--tableheaderback)',
                      color: 'var(--tableheadercolor)',
                      border: '2px solid var(--tableborder)',
                  }"
                  :cell-style="{ border: '2px solid var(--tableborder)' }"
                  stripe
                  border
              >
              
                  <el-table-column
                      v-for="(item, index) in state3.oldList"
                      :key="`col_${index}`"
                      :prop="state3.columns[index].prop"
                      :label="item.label"
                      align="center"
                      min-width="120"
                  >
                   <template #header>
                        <div v-html="item.label"></div>
                    </template>
                  </el-table-column>
              </el-table>
          </div>
          <el-table
              :data="list"
              border
              stripe
              :show-header="false"
              :cell-style="{ border: '2px solid var(--tableborder)' }"
          >
              <el-table-column>
                  <template v-slot="{ row }">
                      {{ row.one }}
                  </template>
              </el-table-column>
              <el-table-column>
                  <template v-slot="{ row ,$index}">
                      <div v-html="row.two" v-if="$index!=3"></div>
                      <div v-else class="numberWrap"  >
                         <div class="numbeItem" v-for="(item,index) in numberConvert(row.two)" :key="index">
                            {{item}}
                         </div>
                        
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </div>
      <div class="footer">{{ footer }}</div>
      <div class="zhanwei" style="height: 50px; width: 100vw"></div>
  </div>
</template>

<script lang="ts" setup>
import { getList } from "@/api/axios/reqTest";
import {
ref,
onMounted,
reactive,
computed,
watch,
getCurrentInstance,
} from "vue";
import X2js from "x2js";
import Sortable from "sortablejs";
const { proxy } = getCurrentInstance() as any;

const gripbasicleft = ref();
const gripbasicright = ref({});
const title = ref();
const suoyin = ref();
const footer = ref();
const arr: any = [{}, {}, {}, {}];
const list = ref([]);
const arr1: any = [];
const loading = ref(false);
const state1 = reactive({
oldList: [
  {
    label: "",
    prop: "Change",
  },
  {
    label: proxy.$t("home.Price"),
    prop: "Price",
  },
  {
    label: proxy.$t("home.Sector"),
    prop: "Sector",
  },
  {
    label: proxy.$t("home.Market"),
    prop: "Market",
  },
  {
    label: proxy.$t("home.Avg_Dly_Vol"),
    prop: "Avg_Dly_Vol",
  },
],
columns: [
  {
    label: proxy.$t("home.Change"),
    prop: "Change",
  },
  {
    label: proxy.$t("home.Price"),
    prop: "Price",
  },
  {
    label: proxy.$t("home.Sector"),
    prop: "Sector",
  },
  {
    label: proxy.$t("home.Market"),
    prop: "Market",
  },
  {
    label: proxy.$t("home.Avg_Dly_Vol"),
    prop: "Avg_Dly_Vol",
  },
],
tableData: [
  {
    Change: "",
    Price: "",
    Sector: null,
    Market: "",
    Avg_Dly_Vol: "",
  },
],
tableConfig: {
  tableItems: [
    {
      label: proxy.$t("home.Change"),
      prop: "Change",
    },
    {
      label: proxy.$t("home.Price"),
      prop: "Price",
    },
    {
      label: proxy.$t("home.Sector"),
      prop: "Sector",
    },
    {
      label: proxy.$t("home.Market"),
      prop: "Market",
    },
    {
      label: proxy.$t("home.Avg_Dly_Vol"),
      prop: "Avg_Dly_Vol",
    },
  ],
},
});
const tableData = ref([]);
const tableData1 = ref([]);
const state3 = reactive({
oldList: [
  {
    label: proxy.$t("home.YearEndPeriod"),
    prop: "YearEndPeriod",
  },
  {
    label: proxy.$t("home.Earnings"),
    prop: "Earnings",
  },
  {
    label: proxy.$t("home.EarningsChanges"),
    prop: "EarningsChanges",
  },
  {
    label: proxy.$t("home.EPS"),
    prop: "EPS",
  },
  {
    label: proxy.$t("home.EPSChanges"),
    prop: "EPSChanges",
  },
  {
    label: proxy.$t("home.DPS"),
    prop: "DPS",
  },
  {
    label: proxy.$t("home.PER"),
    prop: "PER",
  },
  {
    label: proxy.$t("home.Yield"),
    prop: "Yield",
  },
  {
    label: proxy.$t("home.DividendPayout"),
    prop: "DividendPayout",
  },
  {
    label: proxy.$t("home.BookNAV"),
    prop: "BookNAV",
  },
],
columns: [
  {
    label: proxy.$t("home.YearEndPeriod"),
    prop: "YearEndPeriod",
  },
  {
    label: proxy.$t("home.Earnings"),
    prop: "Earnings",
  },
  {
    label: proxy.$t("home.EarningsChanges"),
    prop: "EarningsChanges",
  },
  {
    label: proxy.$t("home.EPS"),
    prop: "EPS",
  },
  {
    label: proxy.$t("home.EPSChanges"),
    prop: "EPSChanges",
  },
  {
    label: proxy.$t("home.DPS"),
    prop: "DPS",
  },
  {
    label: proxy.$t("home.PER"),
    prop: "PER",
  },
  {
    label: proxy.$t("home.Yield"),
    prop: "Yield",
  },
  {
    label: proxy.$t("home.DividendPayout"),
    prop: "DividendPayout",
  },
  {
    label: proxy.$t("home.BookNAV"),
    prop: "BookNAV",
  },
],
tableData: [
  {
    YearEndPeriod: "",
    BookNAV: "",
    DPS: "",
    DividendPayout: null,
    EPS: "",
    EPSChanges: "",
    Earnings: "",
    EarningsChanges: null,
    PER: null,

    Yield: "",
  },
],
tableConfig: {
  tableItems: [
    {
      label: proxy.$t("home.YearEndPeriod"),
      prop: "YearEndPeriod",
    },
    {
      label: proxy.$t("home.Earnings"),
      prop: "Earnings",
    },
    {
      label: proxy.$t("home.EarningsChanges"),
      prop: "EarningsChanges",
    },
    {
      label: proxy.$t("home.EPS"),
      prop: "EPS",
    },
    {
      label: proxy.$t("home.EPSChanges"),
      prop: "EPSChanges",
    },
    {
      label: proxy.$t("home.DPS"),
      prop: "DPS",
    },
    {
      label: proxy.$t("home.PER"),
      prop: "PER",
    },
    {
      label: proxy.$t("home.Yield"),
      prop: "Yield",
    },
    {
      label: proxy.$t("home.DividendPayout"),
      prop: "DividendPayout",
    },
    {
      label: proxy.$t("home.BookNAV"),
      prop: "BookNAV",
    },
  ],
},
});
onMounted(() => {
test();
// columnDrop1();
//columnDrop3();
});
const numberConvert = (row: string) => {
return row.split(" ");
};
const arr2: any = [];
const test = async () => {
const x2js = new X2js();
loading.value = true;
const xml = await getList();
const json = x2js.xml2js(xml as any);
console.log(json);

const result: any = json;
gripbasicleft.value = result.CompanySummary.GrpBasic.Basic[0];
delete gripbasicleft.value._header;
gripbasicright.value = result.CompanySummary.GrpBasic.Basic[1];
const label = ref();
label.value = result.CompanySummary.GrpChanges.Changes[0];
// console.log(label.value);
suoyin.value = result.CompanySummary.GrpIC.Title;
footer.value = result.CompanySummary.GrpRemarks.Remarks.Annualised;
state1.oldList.forEach((item: any, index: number) => {
  item.label = Object.values(label.value)[index];
});
state1.tableData = result.CompanySummary.GrpChanges.Changes.slice(1).map(
  (item: any) => {
    const { Change, Price, Sector, Market, Avg_Dly_Vol } = item;
    return {
      Change: Change,
      Price: Price,
      Sector: Sector,
      Market: Market,
      Avg_Dly_Vol: Avg_Dly_Vol,
    };
  }
);
result.CompanySummary.GrpFinRatio.FinRatio.forEach(
  (item: any, index: number) => {
    Object.keys(item).forEach((key: string, index2: number) => {
      if (index2 >= 0 && index2 < 4) {
        const title = index ? "content1" : "title1";
        arr[index2][title] = item[key];
        console.log(arr[index2][title]);
        console.log(arr[index2]);
      }
      if (index2 >= 4 && index2 < 8) {
        const content = index ? "content2" : "title2";
        arr[index2 - 4][content] = item[key];
      }
    });
  }
);
tableData1.value = arr;
title.value = result.CompanySummary.GrpFinRatio.Title;
const label1 = ref();
label1.value = result.CompanySummary.GrpYearEnd.YearEnd[0];
state3.tableData = result.CompanySummary.GrpYearEnd.YearEnd.slice(1).map(
  (item: any) => {
    return {
      BookNAV: item.BookNAV,
      DPS: item.DPS,
      DividendPayout: item.DividendPayout,
      EPS: item.EPS,
      EPSChanges: item.EPSChanges,
      Earnings: item.Earnings,
      EarningsChanges: item.EarningsChanges,
      PER: item.PER,
      YearEndPeriod: item.YearEndPeriod,
      Yield: item.Yield,
    };
  }
);
const data = result.CompanySummary.GrpCorpInfo.CorpInfo;
delete data[0]["_header"];
data.forEach((item: any, index: number) => {
  console.log(item);
  console.log(item.LinkWarrantStr);

  !index &&
    Object.keys(item).forEach((key: string) => {
      arr1.push({ one: item[key] });
    });
  index &&
    Object.keys(item).forEach((key: string, index2: number) => {
      console.log(key);
      console.log(item[key]);
      console.log(arr1[index2]);

      arr1[index2].two = item[key];
      console.log(arr1);
    });
  index && Object.keys(item);
});
list.value = arr1;
loading.value = false;
};
const makeBr = (str: string) => {
const arr = str.split("/");
if (arr.length) {
  let str2 = "";
  arr.forEach((item: any, index: number) => {
    if (index == arr.length - 1) {
      str2 += item + "<br/>";
    } else {
      str2 += item + "/<br/>";
    }
  });
  return str2;
} else {
  return str;
}
};
</script>

<style lang="scss" scoped>
.numberWrap {
display: flex;
flex-wrap: wrap;
width: calc(100% + 10px);
.numbeItem {
  width: 45px;
  margin-right: 5px;
}
}
.footer {
background-color: var(--tableheaderback);
font-size: 0.6rem;
color: var(--tableheadercolor);
}
.suoyin {
margin-top: 60px;
color: var(--tableheadercolor);
font-size: 0.6rem;
background-color: var(--tableheaderback);
text-align: left;
}
.expand {
.list {
  display: flex;
  justify-content: space-between;
  color: var(--tablecontentcolor);
  margin-bottom: 2vh;
  line-height: 23px;
  font-size: 0.9rem;

  background-color: var(--companyback);

  .list-title {
    text-align: right;
  }
}

.ratiotitle {
  height: 7vh;
  background-color: var(--tableheaderback);
  color: rgb(123, 133, 146);
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    font-size: 0.8rem;
    background-color: var(--tableheaderback);
    color: var(--tableheadercolor);
  }
}
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped) {
background-color: var(--tablecontentback);
}
</style>
